import React, {Component} from 'react';
import classnames from 'classnames'
import PropTypes from "prop-types";

class Main extends Component {


  static propTypes = {
    onChange: PropTypes.func,
    changeAll: PropTypes.func,
    list: PropTypes.array,
    checkAll: PropTypes.bool,
    delTodo: PropTypes.func
  }


  onChange = (id) => e => {
    this.props.onChange(id, e.target.checked)
  }

  changeAll = (e) => {
    this.props.changeAll(e.target.checked)
  }


  render() {
    const {list} = this.props
    return (
      <section className="main">
        <input
          id="toggle-all"
          className="toggle-all"
          type="checkbox"
          checked={list.every(item => item.isDone)}
          onChange={this.changeAll}
        />
        <label
          htmlFor="toggle-all"
        >
          Mark all as complete
        </label>
        <ul className="todo-list">
          {
            list.map(item => (
              <li
                key={item.id}
                className={classnames({completed: item.isDone})}
              >
                <div className="view">
                  <input className="toggle" onChange={this.onChange(item.id)} type="checkbox" checked={item.isDone}/>
                  <label>{item.title}</label>
                  <button className="destroy" onClick={this.props.delTodo(item.id)}/>
                </div>
                <input className="edit" defaultValue="Create a TodoMVC template"/>
              </li>
            ))
          }
        </ul>
      </section>
    );
  }
}

export default Main;
